<template>
  <div class="main_box">
    <div class="main_top">
      <p>镇街收入中心</p>
    </div>
    <div class="main_con clearfix">
      <div class="main_con_left">
        <div class="con_l_top">
          <div class="con_left_top" style="margin-bottom: 25px;">
            <img src="@/assets/img/homwAnalyse/line chart.png" alt="">
            <h3>各镇街月度收入</h3>
            <span>
              <el-date-picker
                v-model="monthValue"
                type="month"
                style="width:40%"
                placeholder="2021-04"
              />
            </span>
            <span class="danwei">单位(万)</span>
          </div>
        </div>
        <div id="con_left">
          <VEcharts
            autoresize
            :options="optsLeft"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <div class="main_con_midle">
        <div class="con_midle_top">
          <div v-for="item in top_list" :key="item.id" class="sum_plan">
            <p>{{ item.value }}</p>
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="con_midle_map">
          <map-echarts @into-town="intoTown" />
        </div>
        <div class="con_midle_bot">
          <div class="midle_bot_top">
            <img src="@/assets/img/homwAnalyse/control.png" alt="">
            <h3>镇街每月收入情况</h3>
          </div>
          <div id="midle_bot">
            <VEcharts
              autoresize
              :options="optsMid"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
      <div class="main_con_right">
        <div class="con_right_top">
          <div class="list_top">
            <img src="@/assets/img/homwAnalyse/bar chart.png" alt="">
            <h3>税源热点</h3>
            <div class="list_details">查看详情</div>
          </div>
          <div style="height:calc(100% - 79px)">
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              :header-cell-style="{ background: 'rgba(91,143,249,0.35)' }"
              height="90%"
            >
              <el-table-column prop="name" label="税种名称" />
              <el-table-column prop="money" label="公共预算累计收入" />
              <el-table-column prop="rate" label="同期对比" />
            </el-table>
          </div>
        </div>
        <div class="con_right_bot">
          <div class="list_top">
            <img src="@/assets/img/homwAnalyse/bar chart.png" alt="">
            <h3>税种组成</h3>
            <div class="list_details">查看详情</div>
          </div>
          <div id="bingtu">
            <VEcharts
              autoresize
              :options="optsBingtu"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import echarts from "echarts ";
// import { dataList } from "./tableData.js";
const echarts = require('echarts/lib/echarts');
import MapEcharts from '@/components/homwAnalyse/mapecharts';
import axios from 'axios';
import VEcharts from '@/components/vecharts';

// 引入柱状图组件
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');

export default {
  components: {
    MapEcharts,
    VEcharts
  },
  data() {
    return {
      monthValue: '',
      top_list: [
        {
          id: 1,
          value: '',
          text: '总收入'
        },
        {
          id: 2,
          value: '',
          text: '公共预算收入'
        },
        {
          id: 3,
          value: '',
          text: '占比'
        }
      ],
      right_list: [
        { id: 1, img: 1, text: '财政补助' },
        { id: 2, img: 2, text: '乡镇预算' }
      ],
      tableData: [],
      rightTopList: [
        {
          id: 1,
          title: '人员经费',
          num: '108,897'
        },
        {
          id: 2,
          title: '公用经费',
          num: '133,566'
        },
        {
          id: 3,
          title: '工程款',
          num: '177,886'
        },
        {
          id: 4,
          title: '村居补助',
          num: '99,237'
        },
        {
          id: 5,
          title: '代管资金',
          num: '243,968'
        },
        {
          id: 6,
          title: '专项支出',
          num: '196,545'
        },
        {
          id: 7,
          title: '上级转移支付资金',
          num: '323,335'
        },
        {
          id: 8,
          title: '拆迁补偿补偿方面',
          num: '343,112'
        }
      ],
      con_left_list: {
        money2: [],
        money5: [],
        name: []
      },
      con_mid_top: {
        MONEY2: '',
        RATE: '',
        MONEY5: ''
      },
      qipao: [],
      con_mid_bot: {
        money2: [],
        money5: [],
        mouth: []
      },
      con_right_bot: [],
      colorArr: [
        { color: '#0169D4', opacity: 1 },
        { color: '#0169D4', opacity: 0.8 },
        { color: '#0169D4', opacity: 0.6 },
        { color: '#0169D4', opacity: 0.4 },
        { color: '#0169D4', opacity: 0.2 }
      ]
    };
  },
  computed: {
    optsLeft() {
      const newArr = {
        color: ['#0169D4', '#91BCEA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          data: ['一般公共预算收入', '总收入']
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.con_left_list.name
        },
        series: [
          {
            name: '一般公共预算收入',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.con_left_list.money5
          },
          {
            name: '总收入',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.con_left_list.money2
          }
        ]
      };
      return newArr;
    },
    optsMid() {
      const newArr1 = {
        color: '#0169D4',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ['蒸发量', '平均温度']
        },
        xAxis: [
          {
            type: 'category',
            // data: this.con_mid_bot.mouth,
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总预算',
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '总收入',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '总预算',
            type: 'bar',
            data: this.con_mid_bot.money2
          },
          {
            name: '总收入',
            type: 'line',
            yAxisIndex: 1,
            data: this.con_mid_bot.money5
          }
        ]
      };
      return newArr1;
    },
    optsBingtu() {
      const newArr2 = {
        title: {
          text: '税种组成',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: '5%'
        // },
        series: [
          {
            name: '税种组成',
            type: 'pie',
            radius: '50%',
            data: this.con_right_bot,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return newArr2;
    }
  },
  created() {
    axios({
      method: 'post',
      url: 'http://115.239.175.246:5501/rdlw/DP/getXzSum',
      data: { year: '2021', month: '4' }
    }).then(res => {
      res.data.dataList.forEach(item => {
        this.con_left_list.money2.push(item.MONEY2);
        this.con_left_list.money5.push(item.MONEY5);
        this.con_left_list.name.push(item.NAME);
      });
      // this.get_con_left();
    });
    axios({
      method: 'post',
      url: 'http://115.239.175.246:5501/rdlw/DP/getSum',
      data: {}
    }).then(res => {
      this.top_list[0].value = res.data.dataList[0].MONEY2;
      this.top_list[1].value = res.data.dataList[0].MONEY5;
      this.top_list[2].value = res.data.dataList[0].RATE;
    });
    axios({
      method: 'post',
      url: 'http://115.239.175.246:5501/rdlw/DP/getqpSum',
      data: {}
    }).then(res => {
      res.data.dataList.forEach((item, index) => {
        this.tableData.push({
          name: item.GL_ITEM_NAME.split('、')[1],
          money: item.MONEY5,
          rate: item.RATE
        });
        if (index < 5) {
          this.con_right_bot.push({
            value: item.MONEY5,
            name: item.GL_ITEM_NAME.split('、')[1],
            itemStyle: this.colorArr[index]
          });
        }
      });
      // this.get_bingtu();
    });
    axios({
      method: 'post',
      url: 'http://115.239.175.246:5501/rdlw/DP/getzzSum',
      data: {}
    }).then(res => {
      res.data.dataList.forEach(item => {
        this.con_mid_bot.money2.push(item.MONEY2);
        this.con_mid_bot.money5.push(item.MONEY5);
        // this.con_mid_bot.mouth.push(item.FIS_PERD + "月");
      });
      // this.get_line_chart();
    });
  },

  mounted() {
    // this.get_con_left();
    // window.onresize = () => {
    //   // 基于准备好的dom，初始化echarts实例
    //   const myChart = this.$echarts.init(document.getElementById("con_left"));
    //   myChart.resize();
    // };
  },
  methods: {
    intoTown(data) {
      if (data.name === '齐贤') {
      }
      // router.push('/Statistic');
    },
    get_con_left() {
      var myChart = echarts.init(document.getElementById('con_left'));
      const _this = this;
      myChart.setOption({
        color: ['#0169D4', '#91BCEA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          data: ['一般公共预算收入', '总收入']
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: _this.con_left_list.name
        },
        series: [
          {
            name: '一般公共预算收入',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: _this.con_left_list.money5
          },
          {
            name: '总收入',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: _this.con_left_list.money2
          }
        ]
      });
    },
    get_line_chart() {
      var myChart = echarts.init(document.getElementById('midle_bot'));
      myChart.setOption({
        color: '#0169D4',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ['蒸发量', '平均温度']
        },
        xAxis: [
          {
            type: 'category',
            // data: this.con_mid_bot.mouth,
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总预算',
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '总收入',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '总预算',
            type: 'bar',
            data: this.con_mid_bot.money2
          },
          {
            name: '总收入',
            type: 'line',
            yAxisIndex: 1,
            data: this.con_mid_bot.money5
          }
        ]
      });
    },
    get_bingtu() {
      var myChart = echarts.init(document.getElementById('bingtu'));
      myChart.setOption({
        title: {
          text: '税种组成',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: '5%'
        // },
        series: [
          {
            name: '税种组成',
            type: 'pie',
            radius: '50%',
            data: this.con_right_bot,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'name-row';
      } else if (rowIndex % 2 === 1) {
        return 'plan-row';
      }
      return '';
    },
    handleCurrentChange(val) {
      this.tableData.forEach(item => {
        item.plan = `${val},888,888`;
        item.num = `${val},99432.34`;
        item.money = val * 10 + 36.67 + '%';
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
p,
h3 {
  margin: 0;
}
.danwei {
  position: absolute;
  right: 3%;
  bottom: -105%;
}
.main_box {
  background: rgba(91, 143, 249, 0.07);
  padding-bottom: 23px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  .main_top {
    height: 9.5%;
    span {
      display: inline-block;
      // width: 193px;
      // height: 40px;
      border: 1px solid #1890ff;
      border-radius: 3px;
      // background: url(@/assets/img/homwAnalyse/gohome.png) 53px center no-repeat;
      b {
        display: inline-block;
        // width: 64px;
        // height: 24px;
        font-family: PingFangSC, PingFangSC-Medium;
        color: #1890ff;
        line-height: 24px;
      }
    }
    p {
      height: 79px;
      font-size: 32px;
      line-height: 79px;
      text-align: center;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #576a95;
    }
  }
}
.main_con {
  padding: 0 21px;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 90.5%;
  .main_con_left {
    width: 25%;
    // height: 887px;
    height: 100%;
    margin-left: 5px;
     box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
    .con_l_bot {
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
      width: 95%;
      .con_right_subsidy {
        width: 48%;
        height: 204px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        padding-left: 25px;
        .subsidy_top {
          margin: 14px 0;
          // img {
          //   // vertical-align: middle;
          // }
          h3 {
            display: inline-block;
            height: 25px;
            font-size: px2vw(18px);
            font-family: PingFangSC, PingFangSC-Medium;
            line-height: 25px;
            margin-left: 7px;
            vertical-align: middle;
            color: #4ca7ed;
          }
        }
        .subsidy {
          display: flex;
          height: calc(100% - 53px);
          justify-content: space-around;
          flex-direction: column;
        }
        .subsidy_midle {
          .subsidy_midle_left {
            display: inline-block;
            margin-left: 16px;
            h3 {
              height: 28px;
              font-size: px2vw(20px);
              font-family: DINCondensed, DINCondensed-Bold;
              font-weight: 700;
              color: #0051ad;
              line-height: 28px;
            }
            p {
              height: 20px;
              font-size: px2vw(14px);
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              color: #4ca7ed;
              line-height: 20px;
            }
          }
        }
      }
    }

    .con_l_top {
      position: relative;
      padding-left: 5px;
      width: calc(100% - 25px);
      height: 78px;
      padding-bottom: 25px;

    }
    .con_left_top {
      position: relative;
      padding: 23px 0 0 26px;
      height: 44px;
      img {
        width: 15px;
        height: 14px;
        vertical-align: middle;
      }
      h3 {
        display: inline-block;
        height: 25px;
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        line-height: 25px;
        margin-left: 6px;
        vertical-align: middle;
        color: #4ca7ed;
      }
      .con_plan {
        position: absolute;
        right: 26px;
        top: 3px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #94c2fd, #5b8ff9) r;
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
      .con_new {
        position: absolute;
        right: 26px;
        top: 24px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #93eed2, #5ad8a6);
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
    }
  }
  .main_con_midle {
    position: relative;
    // height: 880px;
    height: 100%;
    width: 50%;
    .con_midle_top {
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      width: 97%;
      height: 13%;
      .sum_plan {
        width: 31%;
        height: 100%;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        padding-top: 21px;
        text-align: center;
        p {
          text-align: center;
          height: 38px;
          font-size: px2vw(36px);
          font-family: DINCondensed, DINCondensed-Bold;
          font-weight: 700;
          color: #0051ad;
          line-height: 38px;
        }
        span {
          display: inline-block;
          height: 22px;
          font-family: PingFangSC, PingFangSC-Medium;
          color: #4ca7ed;
          line-height: 22px;
          margin-top: 5px;
        }
      }
    }
    .con_midle_map {
      width: 100%;
      height: 64%;
      background: url(../../assets/img/homwAnalyse/map_bj.png);
      background-size: 102% 101%;
      margin-top: 8px;
      margin-left: 5px;
    }
    .con_midle_bot {
      // position: absolute;
      // bottom: 0;
      // left: 24px;
      width: 97%;
            margin-left: 20px;
      height: 22%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      .midle_bot_top {
        height: 54px;
        padding: 23px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 5px;
          vertical-align: middle;
          color: #4ca7ed;
        }
      }
    }
  }
  .main_con_right {
    height: 100%;
    width: 25%;
    display: flex;

    flex-direction: column;
    justify-content: space-between;
    margin-left: 12px;
    .con_right_top {
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      height: 48%;
      /deep/.el-table td,
      /deep/.el-table th {
        text-align: center;
        height: 54px;
        border-bottom: none;
      }
      /deep/.el-table__header-wrapper tr {
        background: #0169d4;
        color: #ffffff;
      }
      /deep/.el-table .name-row {
        background: rgba(255, 255, 255, 0.1);
        color: #0169d4;
      }

      /deep/.el-table .plan-row {
        background: rgba(1, 105, 212, 0.4);
        color: #0169d4;
      }
      .list_top {
        position: relative;
        height: 79px;
        padding: 23px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 4px;
          vertical-align: middle;
          color: #4ca7ed;
        }
        .list_details {
          position: absolute;
          top: 23px;
          right: 17px;
          width: 88px;
          height: 32px;
          border: 1px solid #1890ff;
          border-radius: 3px;
          text-align: center;
          line-height: 32px;
          color: #1890ff;
          font-size: px2vw(14px);
        }
      }
    }
    .con_right_bot {
      width: 100%;
      height: 48%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      margin-top: 24px;
      .list_top {
        position: relative;
        height: 79px;
        padding: 23px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 4px;
          vertical-align: middle;
          color: #4ca7ed;
        }
        .list_details {
          position: absolute;
          top: 23px;
          right: 17px;
          width: 88px;
          height: 32px;
          border: 1px solid #1890ff;
          border-radius: 3px;
          text-align: center;
          line-height: 32px;
          color: #1890ff;
          font-size:px2vw(14px);
        }
      }
      .list {
        padding-left: 12px;
        /deep/.el-table td,
        /deep/.el-table th {
          text-align: center;
          height: 54px;
          border-bottom: none;
        }
        /deep/.el-table__header-wrapper tr {
          background: #0169d4;
          color: #ffffff;
        }
        /deep/.el-table .name-row {
          background: rgba(255, 255, 255, 0.1);
          color: #0169d4;
        }

        /deep/.el-table .plan-row {
          background: rgba(1, 105, 212, 0.4);
          color: #0169d4;
        }

        .block {
          margin-top: 10px;
          float: right;
          /deep/.el-pagination.is-background .el-pager li:not(.disabled),
          /deep/.el-pagination.is-background .btn-next,
          /deep/.el-pagination.is-background .btn-prev:disabled {
            background-color: transparent; // 进行修改未选中背景和字体
          }
          /deep/.el-pagination.is-background
            .el-pager
            li:not(.disabled).active {
            background-color: #5b8ff9; // 进行修改选中项背景和字
          }
        }
      }
    }
  }
}
#con_left {
  width: 100%;
  height: calc(100% - 78px);
}

#midle_bot {
  width: 100%;
  height: calc(100% - 54px);
}
#hot_qipao {
  width: 100%;
  height: calc(100% - 64px);
}
#bingtu {
  width: 100%;
  height: calc(100% - 64px);
}
/deep/.el-table {
  width: 100%;
  height: calc(100% - 79%);
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
}
// 设置滚动条的背景色和圆角
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: rgb(221, 221, 221);
  border-radius: 8px;
}
</style>
